<template>
	<view>
		<view class="detail-text">{{segment.content}}</view>
		<view class="lessons">
			<view @click="navigateToDetail(item)" class="lessons-item" v-for="(item,index) in segment.list" :key="index">
				<image class="pic" :src="item.image" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
            segment:{
                type:Object,
				default:function () {
					return {};
                }
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
            navigateToDetail(item){
                console.log('navigateToDetailI')
                this.$emit('navigateToDetail',item)
			}
		}
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
	}
</style>
<style lang="scss" scoped>
.detail-text {
	font-size: 22upx;
	padding: 10upx 30upx;
}
.lessons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 30upx;
	&-item {
		width: 310upx;
		height: 180upx;
		border-radius: 16upx;
		margin-bottom: 20upx;
		.pic {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
